<template>
  <view>
    <u-navbar title="商家入驻" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#333" back-icon-color="#333"></u-navbar>
    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 30rpx">
      <view class="" style="padding: 35rpx 0 24rpx 33rpx; font-size: 28rpx">商家名称</view>
      <view class="" style="margin: 0 35rpx">
        <input
          type="text"
          value=""
          style="background: #f2f2f2; font-size: 28rpx; color: #666666; height: 80rpx; border-radius: 16rpx; padding-left: 34rpx"
          placeholder="请输入"
          v-model="name"
        />
      </view>
    </view>

    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 30rpx">
      <view class="" style="padding: 35rpx 0 24rpx 33rpx; font-size: 28rpx">联系方式</view>
      <view class="" style="margin: 0 35rpx">
        <input
          type="text"
          value=""
          style="background: #f2f2f2; font-size: 28rpx; color: #666666; height: 80rpx; border-radius: 16rpx; padding-left: 34rpx"
          placeholder="请输入"
          v-model="ipone"
        />
      </view>
    </view>

    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 30rpx">
      <view class="" style="padding: 35rpx 0 24rpx 33rpx; font-size: 28rpx">简介</view>
      <view class="" style="margin: 0 35rpx; background: #f7f7f7">
        <u-input v-model="value" type="textarea" :border="true" height="100" :auto-height="true" />
      </view>
    </view>

    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 30rpx">
      <view class="" style="padding: 35rpx 0 24rpx 33rpx; font-size: 28rpx">位置</view>
      <view class="" style="margin: 0 35rpx" @tap="open">
        <input
          type="text"
          value=""
          style="background: #f2f2f2; font-size: 28rpx; color: #666666; height: 80rpx; border-radius: 16rpx; padding-left: 34rpx"
          placeholder="请输入"
          v-model="address"
          :disabled="true"
        />
      </view>
    </view>

    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 30rpx">
      <view class="" style="padding: 35rpx 0 24rpx 33rpx; font-size: 28rpx">背景图</view>
      <view class="" style="margin: 0rpx 35rpx" @tap="changeimg(1)">
        <image :src="img1" mode="aspectFill" style="height: 130rpx; border-radius: 10rpx; width: 220rpx"></image>
      </view>
    </view>

    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 30rpx">
      <view class="" style="padding: 35rpx 0 24rpx 33rpx; font-size: 28rpx">营业执照</view>
      <view class="" style="margin: 0rpx 35rpx" @tap="changeimg(2)">
        <image :src="img2" mode="aspectFill" style="height: 130rpx; border-radius: 10rpx; width: 220rpx"></image>
      </view>
    </view>

    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 30rpx">
      <view class="" style="padding: 35rpx 0 24rpx 33rpx; font-size: 28rpx">备注</view>
      <view class="" style="margin: 0 35rpx">
        <input
          type="text"
          value=""
          style="background: #f2f2f2; font-size: 28rpx; color: #666666; height: 80rpx; border-radius: 16rpx; padding-left: 34rpx"
          placeholder="请填写备注"
          v-model="remark"
        />
      </view>
    </view>

    <!-- 提交申请 -->
    <view class="btn" @tap="sub">提交申请</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#fff'
      },
      raios: 0,
      img1: 'https://wenzhen.fuerle168.com/static/shop/user/upload.png',
      img2: 'https://wenzhen.fuerle168.com/static/shop/user/upload.png',
      value: '',

      fileList: [],
      radio: true,
      show: false,
      show1: false,
      name: '',
      ipone: '',
      remark: '',
      address: '',
      imgbox: '',
      lat: '',
      long: ''
    };
  },
  methods: {
    open() {
      let that = this;
      uni.chooseLocation({
        success: function (res) {
          console.log(res);
          // that.hospital_city = that.formatLocation(res).REGION_PROVINCE + '/' + that.formatLocation(res).REGION_CITY + '/' + that.formatLocation(res).REGION_COUNTRY;
          that.address = res.address;
          that.lat = res.latitude;
          that.long = res.longitude;
          if (isNaN(res.longitude)) {
            uni.showToast({
              title: '地址出错，请重新选择',
              icon: 'none'
            });
          }
        }
      });
    },
    formatLocation(res) {
      // var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
      var regex = /^(北京|天津|重庆|上海|香港特别行政区|澳门特别行政区)/;
      var REGION_PROVINCE = [];
      var addressBean = {
        REGION_PROVINCE: null,
        REGION_COUNTRY: null,
        REGION_CITY: null,
        ADDRESS: null
      };

      function regexAddressBean(address, addressBean) {
        // regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
        regex = /^(.*?[市]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
        var addxress = regex.exec(address);
        addressBean.REGION_CITY = addxress[1];
        addressBean.REGION_COUNTRY = addxress[2];
        addressBean.ADDRESS = addxress[3] + '(' + res.name + ')';
        // console.log(addxress);
      }
      if (!(REGION_PROVINCE = regex.exec(res.address))) {
        regex = /^(.*?(省|自治区))(.*?)$/;
        REGION_PROVINCE = regex.exec(res.address);
        addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
        regexAddressBean(REGION_PROVINCE[3], addressBean);
      } else {
        addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
        regexAddressBean(res.address, addressBean);
      }
      return addressBean;
    },
    onUploaded(res) {
      let imgs = [];
      res.map((i) => {
        imgs.push(i.response.data.url);
      });
      this.imgbox = [...new Set(imgs)];
      console.log(this.imgbox);
    },
    sub() {
      if (this.name == '') {
        uni.showToast({
          title: '请填写商家名称',
          icon: 'none'
        });
      } else if (this.ipone.length != 11) {
        uni.showToast({
          title: '请填写正确的手机号',
          icon: 'none'
        });
      } else if (this.address == '') {
        uni.showToast({
          title: '请选择位置',
          icon: 'none'
        });
      } else if (this.img1 == 'https://wenzhen.fuerle168.com/static/shop/user/upload.png') {
        uni.showToast({
          title: '请上传背景图',
          icon: 'none'
        });
      } else if (this.img2 == 'https://wenzhen.fuerle168.com/static/shop/user/upload.png') {
        uni.showToast({
          title: '请上传营业执照',
          icon: 'none'
        });
      } else if (this.value == '') {
        uni.showToast({
          title: '请填写简介内容',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api//user/businessSettled',
          method: 'post',
          data: {
            shop_name: this.name,
            mobile: this.ipone,
            content: this.value,
            address: this.address,
            lng: this.long,
            lat: this.lat,
            background_img: this.img1,
            business_license: this.img2,
            remark: this.remark
          }
        }).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          setTimeout(function () {
            uni.navigateBack();
          }, 1000);
        });
      }
    },
    xz() {
      this.show = true;
    },
    confirm(e) {
      console.log(e);
      let num = e[0];
      this.work = this.selectorObj[num].name;
    },
    confirm1(e) {
      console.log(e);
      this.province = e.province.label;
      this.city = e.city.label;
      this.county = e.area.label;
      this.add = e.province.label + '/' + e.city.label + '/' + e.area.label;
    },
    changeimg(e) {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.log(res);
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: 'https://wenzhen.fuerle168.com/api//common/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              token: uni.getStorageSync('user_info').token
            },
            success: (uploadFileRes) => {
              console.log(JSON.parse(uploadFileRes.data).data.fullurl);
              if (e == 1) {
                this.img1 = JSON.parse(uploadFileRes.data).data.fullurl;
              } else {
                this.img2 = JSON.parse(uploadFileRes.data).data.fullurl;
              }
            }
          });
        }
      });
    },
    get(e) {
      uni.navigateTo({
        url: '/pages/user/xieyi?type=3'
      });
    },
    gets() {
      this.api({
        url: '/api/common/site',
        method: 'post'
      }).then((res) => {
        this.data = res.data;
      });
    }
  },
  onShow() {}
};
</script>

<style>
page {
  background: #f7f7f7;
}
.btn {
  margin: 57rpx 125rpx;
  height: 80rpx;
  background: linear-gradient(0deg, #e50014 0%, #ff6572 100%);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
}
</style>
